<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">订单详情</view>
		</cu-custom>
		<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]" v-if="isShow">
			<form @submit="formSubmit" >
				<view class="cu-form-group">
					<view class="title">单号</view>
					<input type="text" disabled :value="'ATE001'"/>
				</view>
				<view class="cu-form-group">
					<view class="title">日期</view>
					<input type="text" name="LTICKETDATE" disabled :value="LTICKETDATE" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">要求交期</view>
					<picker mode="date" @change="DateChange" start="1999-09-01" end="2999-09-01" name="LREQDATE" :value="LREQDATE">
						<view class="picker">
							{{LREQDATE}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">客户</view>
					<input type="text" name="LPTNCODE" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">签订公司</view>
					<input type="text" name="LCOMPANYID" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">业务员</view>
					<input type="text" name="LSALEOPID" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">产品编号</view>
					<input type="text" name="LITEMCODE" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">产品名称</view>
					<input type="text" name="LITEMNAME" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">规格</view>
					<input type="text" name="LITEMSTD" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">成份</view>
					<input type="text" name="LITEMCOMPOS" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">颜色</view>
					<input type="text" name="LCOLORNAME" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">色号</view>
					<input type="text" name="LCOLORCODE" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">批号</view>
					<input type="text" name="LBATCH" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">股数</view>
					<input type="text" name="LNUMBER" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">捻度</view>
					<input type="text" name="LNIANDU" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">旦数</view>
					<input type="text" name="LNDEN" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">计量方式</view>
					<picker @change="PickerChange2" name="LUNIT" :value="index2" :range="picker2" range-key="LNAME">
						<view class="picker">
							{{picker2[index2].LNAME}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">币种</view>
					<picker @change="PickerChange3" name="LCURRENCYID" :value="index3" :range="picker3" range-key="LNAME">
						<view class="picker">
							{{index3>-1?picker3[index3].LNAME:'请选择'}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">制单人</view>
					<input type="text" name="LMAC" disabled :value="LMAKEOPID" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">制单日期</view>
					<input type="text" name="LMAC" disabled :value="LMAKEOPDATE" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">备注</view>
					<input placeholder="请输入备注" type="text" name="LREMARK" />
				</view>
				<button-father :Position="'tb-fa-fixed'">
					<button class="cu-btn lines-red  lg shadow tb-flex cu-btn-new">重置</button>
					<button class="cu-btn bg-gradual-blue  lg shadow tb-flex cu-btn-new" form-type="submit">确认</button>
				</button-father>
			</form>
		</view>
		<view class="cu-bar bg-cyan solid-bottom margin-xs radius shadow shadow-lg " style="display: flex;justify-content: space-between;background-color: rgb(223, 240, 253);" v-if="isShow">
			<view style="margin-left: 32rpx;font-size: 36rpx;color: rgb(127, 184, 178);"><text>新增明细</text></view>
			<image @tap="jumpadddetail" style="width: 100rpx;height: 100rpx;padding-right: 20rpx;" src="/static/images/add.png"
			 mode="aspectFit"></image>
		</view>
		<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]" v-if="isShow" style="margin-bottom: 100rpx;">
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" @tap="jumpdetail(item,index)" :data-target="'move-box-' + index">
					<view class="cu-avatar round lg" style="background-color: #fff;">
						<image src="/static/images/Distributionsettings.png" mode="aspectFit"></image>
					</view>
					<view class="content">
						<view class="text-grey">原料:{{item.LYLNAME}}</view>
						<view class="text-gray text-sm">色号:{{item.LLCOLORCODE}} 颜色:{{item.LLCOLORNAME}} 数量:{{item.LLWEIGHT}}</view>
					</view>
					<view class="move">
						<view class="bg-red" @tap.stop="Delete(item,index)">删除</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ButtonFather from "@/colorui/components/ButtonFather.vue";
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		getselectReferList
	} from "@/service/selectList"
	export default {
		data() {
			return {
				isShow: false,
				LREQDATE: global.dateright,
				LMAKEOPDATE: global.dateright,
				LTICKETDATE: global.dateright,
				height:this.screenHeight,
				LMAKEOPID: global.userinfo.lusername,
				picker2: [],
				index2: 0,
				picker3: [],
				index3: 0,
				list: [],
				modalName: null
			}
		},
		computed: {
			...mapGetters([
				'Style', 'Font', 'Orderentrygetlist','BackGround','BackGroundBox'
			]),
		},
		components: {
			ButtonFather
		},
		onShow() {
			if (this.Orderentrygetlist) {
				this.list = this.Orderentrygetlist
			}
		},
		onUnload() {
			this.dellist([])
		},
		onLoad() {
			const Ajax = new Promise((resolve,reject) => {
				getselectReferList( 4002, '表头', 'LUNIT', '', '').then(res => {
					if (res.data.status == 200) {
						resolve(res.data.data)
					}
				})
			}) 
			const Ajax0 = new Promise((resolve,reject) => {
				getselectReferList( 4002, '表头', 'LCURRENCYID', '', '').then(res => {
					if (res.data.status == 200) {
						resolve(res.data.data)
					}
				})
			})
			Promise.all([Ajax, Ajax0]).then(res => {
				//所有请求都成功后执行函数
				this.picker2 = res[0]
				this.picker3 = res[1]
				this.isShow = true
			}).catch(error => {
				//// 异常处理
				console.log(error);
			})
		},
		methods: {
			...mapMutations(['Orderentrydellist','dellist']),
			//跳转详情页面
			jumpadddetail() {
				uni.navigateTo({
					url: '../Orderentryadd/Orderentryadddetail/Orderentryadddetail'
				})
			},
			//跳转到修改页面
			jumpdetail(item,index) {
				uni.navigateTo({
					url:`../Orderentryadd/Orderentryedit?item=${JSON.stringify(item)}&index=${index}`
				})
			},
			//要求交期选择
			DateChange(e) {
				this.LREQDATE = e.detail.value
			},
			PickerChange2() {
				this.index2 = e.detail.value
			},
			PickerChange3() {
				this.index3 = e.detail.value
			},
			//提交
			formSubmit(e) {
				console.log(e.detail.value);
			},
			//删除
			Delete(item, index) {
				uni.showModal({
					title: '提示',
					content: `确定要删除第${index + 1}条内容吗？`,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.Orderentrydellist(index)
						}
					}
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
				console.log('开始');
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style>
	page {
		background-color: whitesmoke;
	}
</style>
